<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="../../d3/d3.min.js" charset="utf-8"></script>
	
	<style type="text/css">
	body { 
		background-color: #333; 
		margin: 20px;
	  	color: white;
	}
	</style>
</head>
<body>

	<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
	</svg>
	
	
	<script type="text/javascript">
		var v_SVG   = d3.select("body").select("svg");
		var v_G     = v_SVG.append("g");
		var v_Datas = [{cx:150 ,cy:200 ,r:30}
		              ,{cx:220 ,cy:200 ,r:30}
		              ,{cx:150 ,cy:270 ,r:30}
		              ,{cx:220 ,cy:270 ,r:30}]; 
		
		v_G.selectAll(".MyCircle")
		.data(v_Datas)
		.enter()
		.append("circle")
		.attr("cx" ,function (d ,i) { return d.cx; })
		.attr("cy" ,function (d ,i) { return d.cy; })
		.attr("r"  ,function (d ,i) { return d.r; })
		.attr("fill" ,"steelblue");
		
		var v_Zoom = d3.zoom()
		               .scaleExtent([-10 ,10])
		               .on("zoom" ,function()
		               {
		            	   	console.log("eeeeeeeeeee");
		               		d3.select(this).attr("transform" ,"scale(" + d3.event.transform.k + ")");
		               });
		
		
		console.log(v_Zoom);
		
		// 放大2倍
		v_Zoom.scaleTo(v_G ,2);
	</script>

</body>
</html>